<template>
    <div>
        <div class="title">
            <div class="h2">添加新闻</div>
        </div>
        <!-- 添加新闻 -->
        <div class="mainer">
            <div class="input-group">
                <div>新闻标题：</div>
                <input v-model="new_title" type="text" placeholder="请输入新闻标题">
            </div>
            <div class="input-group">
                <div>发布时间：</div>
                <el-date-picker class="start_time" clear-icon="none" prefix-icon="none" v-model="start_time" format="yyyy年M月d日" value-format="yyyy/MM/dd"></el-date-picker>
            </div>
            <div class="input-group">
                <div>所属类别：</div>
                <el-select v-model="family" placeholder="请选择">
                        <el-option v-for="item of familylist" :key="item.nid" :value="item.nid" :label="item.name">{{item.name}}</el-option>
                </el-select>
            </div>
            <div class="input-group">
                <div>新闻封面图：</div>
                <el-upload
                    class="upload-loader"
                    name="cover"
                    list-type="picture"
                    :on-exceed="fileLimit"
                    ref="upload"
                    :limit="1"
                    action="http://localhost:4040/admin/upload"
                    :on-success="upload_success"
                    :on-remove="file_remove"
                >
                   <div class="coverbtn" @click="upload_submit">上传封面图</div>
                </el-upload>
            </div>
            <div class="input-group details">
                <div>新闻详情：</div>
                <!-- 富文本编辑器 -->
                <div class="editor">
                    <Toolbar :editor="editor":defaultConfig="toolbarConfig" :mode="mode"/>
                    <Editor @onCreated="onCreated" v-model="details" :mode="mode" :defaultConfig="editorConfig" style="height:400px;overflow-y:hidden;"/>
                </div>
            </div>
            <div class="submit" @click="submit">提交</div>
        </div>
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    export default {
        components:{Editor,Toolbar},
        data() {
            return {
                new_title:'',
                start_time: '',
                editor:null,
                toolbarConfig:{},
                mode:'default',
                //编辑器配置项
                editorConfig:{placeholder:'请输入新闻的详情'},
                details:'', //富文本编辑器的值
                family:'',
                familylist:[],
                coverImgUrl:'', //上传封面图回显的地址
            }
        },
        methods:{
            //点击提交按钮触发
            submit(){
                const {new_title,start_time,family,details,coverImgUrl} = this
                const  url='admin/add_news'
                const params={title:new_title,startime:start_time,fid:family,cover:coverImgUrl,details}
                this.axios.post(url,params)
                    .then(res => {
                        if (res.data.code==200){
                            alert('添加成功')
                        }
                    })
            },
            onCreated(editor){
                this.editor=Object.seal(editor)
            },
            loadFamily(){
                const url='data/news_nav'
                this.axios.get(url)
                    .then(res => {
                        this.familylist=res.data.result
                    })
            },
            //文件上传成功触发
            upload_success(res){
                //把返回的图片地址保存
                this.coverImgUrl=res.url
            },
            //移除文件列表中文件时触发
            file_remove(){
                this.coverImgUrl=''
            },
            upload_submit(){
                this.$refs.upload.submit()
            },
            //文件超出上传限制个数的钩子方法
            fileLimit(){
                alert('只能上传一个文件')
            }
        },
        mounted(){
            this.loadFamily()
        },
        beforeDestroy(){
            if (this.editor==null) return
            this.editor.destroy()
        }
    }
</script>

<style lang="scss" scoped>
$bgc:#26b99a;
$text-color:#7f8b9c;
.title {
    padding-top: 30px;
    margin:0 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e6e9ed;
    .h2 {
        font-size: 1.5em;
        color: $text-color;
    }
}
.mainer {
    padding-top: 20px;
    padding-left: 8em;
    .submit {
        padding: 8px 0;
        cursor: pointer;
        color: #fff;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #26b99a;
        width: 70px;
        &:active {
            background-color: darken(#26b99a,10%);
        }
    }
    .input-group {
        display: flex;
        align-items: center;
        width: 500px;
        padding-bottom: 10px;
        .coverbtn {
            background-color: $bgc;
            color: #fff;
            padding: 5px 10px;
            font-size: .9em;
            border-radius: 5px;
            &:active {
                background-color: darken($bgc,10%);
            }
        }
        .upload-loader {
            img {
                max-width: 100%;
            }
            ::v-deep .el-upload-list__item {
                img {
                    max-width: 100%;
                    padding-right: 15px;
                    width: auto;
                }
            }
        }
        .editor {
            border: 1px solid #cccccc;
            border-radius: 10px;
        }
        ::v-deep .el-upload-dragger {
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
        }
        &.details {
            align-items: flex-start;
            width: 1000px;
        }
        >div {
            flex-basis: 7em;
        }
        >input {
            height: 40px;
            outline: none;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            padding: 5px 20px;
        }
        >*:nth-child(2){
            flex: 1;
        }
        ::v-deep .el-input__inner {
            &:hover {
                border: 1px solid #dcdfe6;
            }
            &:focus {
                border: 1px solid #dcdfe6;
            }
        }
        ::v-deep .start_time {
            width: 300px;
            input {
                width: auto;
            }
        }
    }
}
</style>